<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="myDiv"></div>   

    <ul id="myUL1"></ul> 
    <ul id="myUL2"></ul> 
    <ul id="myUL3"></ul> 
    <ul id="myUL4"></ul> 
<script>
    function loop1(){
        for(var i=0; i<10000; i++){
            document.getElementById("myDiv").innerHTML += "ha ";
        }
    }



    function loop2(){
        var text = "";
        for(var i=0; i<10000; i++){
            text += "ho ";
        }
        document.getElementById("myDiv").innerHTML = text;
    }

    function testTime(func,desc){
        console.time(desc);
        func();
        console.timeEnd(desc);
    }

    // testTime(loop1,"loop1 function");
    // testTime(loop2,"loop2 function");

    function appendImgToList(parentNode){
        for(var i=0; i<1000; i++){
            var li = document.createElement("li");
            var img = document.createElement("img");
            img.setAttribute("src","pic.png");
            li.appendChild(img);
            parentNode.appendChild(li);
        }
    }

    /*原始解决方案*/
    function createList1(){
        var myUL = document.getElementById("myUL1");
        appendImgToList(myUL);
    }

    /*隐藏元素，应用修改，重新显示*/
    function createList2(){
        var myUL = document.getElementById("myUL2");
        myUL.style.display = "none";
        appendImgToList(myUL);
        myUL.style.display = "block";   
    }
    /*使用文档片断*/
    function createList3(){
        var myUL = document.getElementById("myUL3");
        var fragment = document.createDocumentFragment();
        appendImgToList(fragment);
        myUL.appendChild(fragment);  
    }
    /*拷贝*/
    function createList4(){
        var oldUL = document.getElementById("myUL4");
        var cloneUL = oldUL.cloneNode(true);
        appendImgToList(cloneUL);
        oldUL.parentNode.replaceChild(cloneUL, oldUL);
    }

    testTime(createList1,"function createList1");
    testTime(createList2,"function createList2");
    testTime(createList3,"function createList3");
    testTime(createList4,"function createList4");

</script>
</body>
</html>